import React, { memo } from 'react';
import { renderRoutes } from 'react-router-config';
import { NavLink } from 'react-router-dom';
import Player from '../Player';
import { Top, Tab, TabItem } from './style';
export default memo(function Home(props) {
  const { routes } = props.route;
  return (
    <div>
      <Top>
        <span className="iconfont menu">&#xe65c;</span>
        <span>WebApp</span>
        <span className="iconfont search">&#xe62b;</span>
      </Top>
      <Tab>
        <NavLink to="/recommend" activeClassName="selected">
          <TabItem>
            <span>推荐</span>
          </TabItem>
        </NavLink>
        <NavLink to="/singers" activeClassName="selected">
          <TabItem>
            <span>歌手</span>
          </TabItem>
        </NavLink>
        <NavLink to="/rank" activeClassName="selected">
          <TabItem>
            <span>排行</span>
          </TabItem>
        </NavLink>
      </Tab>
      {renderRoutes(routes)}
      <Player></Player>
    </div>
  );
});
